<template>
  <q-page padding class="docs-carousel">
    <q-carousel color="white" arrows :style="{height: height}" :thumbnails="[
        'statics/mountains.jpg',
        'statics/parallax1.jpg',
        'statics/parallax2.jpg',
        'statics/mountains.jpg',
        'statics/parallax1.jpg',
        'statics/parallax2.jpg',
        'statics/mountains.jpg',
        'statics/parallax1.jpg',
        'statics/parallax2.jpg',
      ]" :thumbnails-horizontal="true">
      <q-carousel-slide img-src="statics/mountains.jpg" />
      <q-carousel-slide img-src="statics/parallax1.jpg" />
      <q-carousel-slide img-src="statics/parallax2.jpg" />
      <q-carousel-slide img-src="statics/mountains.jpg" />
      <q-carousel-slide img-src="statics/parallax1.jpg" />
      <q-carousel-slide img-src="statics/parallax2.jpg" />
      <q-carousel-slide img-src="statics/mountains.jpg" />
      <q-carousel-slide img-src="statics/parallax1.jpg" />
      <q-carousel-slide img-src="statics/parallax2.jpg" />
    </q-carousel>
  </q-page>
</template>

<script>
import { easing } from "quasar";

export default {
  data: () => ({

  }),
  computed: {
    height() {
      return !this.$q.platform.is.desktop ? '200px' : '450px'
    }
  }
};
</script>

<style lang="stylus">
</style>
